<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootbox简单示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link href="prism/prism.css" rel="stylesheet" />
<link href="../bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.event , button[onclick] {
    margin: 10px;
    color: blue;
}
</style>
</head>
<body>

<label class="event">设置窗口居中<input type="checkbox" onclick="setDialogCenter(this)"/></label>

<pre id="dialog_center_css" class="language-css line-numbers">
<code>/*
 * 窗口居中，摘自bootbox官网Examples页面page.css
 * bootstrap 4.2以上版本使用自带居中属性
 */
.modal-dialog {
    margin-top: 0;
    margin-bottom: 0;
    display: -webkit-box;
    display: flex;
    height: 100%;
}
.modal-content {
    margin-top: auto;
    margin-bottom: auto;
    border: none;
}</code></pre>

<hr/>

<button type="button" onclick="runCode('alert')">弹出alert框</button>
<pre id="alert" class="language-javascript line-numbers"><code>bootbox.alert("Hello world!");</code></pre>

<button type="button" onclick="runCode('alert_param_callback')">弹出alert框（普通参数）</button>
<pre id="alert_param_callback" class="language-javascript line-numbers"><code>bootbox.alert("Hello world!" , function(){
    alert("in the callback!");
});</code></pre>

<button type="button" onclick="runCode('alert_js_callback')">弹出alert框（js对象，居中）</button>
<pre id="alert_js_callback" class="language-javascript line-numbers"><code>bootbox.alert({
    title: "hello",
    message: "chendd!",centerVertical: true,
    callback: function(){
        alert("in the callback!");
    }
});</code></pre>

<button type="button" onclick="runCode('alert_size')">弹出alert框（设置窗口大小）</button>
<pre id="alert_size" class="language-javascript line-numbers"><code>bootbox.alert({
    message: "This is the small alert!",
    size: 'small',
    callback: function(){
        bootbox.alert({message: "in the callback!" , size: "large"});
    }
});</code></pre>

<button type="button" onclick="runCode('alert_backdrop_size')">弹出alert框（点击遮罩关闭）</button>
<pre id="alert_backdrop_size" class="language-javascript line-numbers"><code>bootbox.alert({
    message: "This is the small alert!",
    backdrop: true,
    locale: 'zh_CN'
});</code></pre>

<hr/>

<button type="button" onclick="runCode('confirm_basic')">弹出confirm框</button>
<pre id="confirm_basic" class="language-javascript line-numbers"><code>bootbox.confirm("This is the default confirm!", function(result){
    alert('callback: ' + result);
});</code></pre>

<button type="button" onclick="runCode('confirm_custom_basic')">弹出confirm自定义框</button>
<pre id="confirm_custom_basic" class="language-javascript line-numbers"><code>bootbox.confirm({
    message: "Do you like it?",
    buttons: {
        cancel: {
            label: '取消',
            className: 'btn-danger'
        },
        confirm: {
            label: '确定',
            className: 'btn-success'
        }
    },
    callback: function (result) {
        alert('callback: ' + result);
    }
});</code></pre>

<button type="button" onclick="runCode('confirm_locale_basic')">弹出confirm多语言</button>
<pre id="confirm_locale_basic" class="language-javascript line-numbers"><code>bootbox.confirm({
    message: "点击取消不关闭窗口?",
    locale: 'zh_CN',
    callback: function (result) {
        alert('callback: ' + result);
        return result;
    }
});</code></pre>

<hr/>

<button type="button" onclick="runCode('prompt_type_basic')">弹出prompt</button>
<pre id="prompt_type_basic" class="language-javascript line-numbers"><code>bootbox.prompt({
    title: "支持多种类型输入元素",
    inputType: 'textarea',
    value: "支持text,date,time,checkbox,select,range,password,email,number...",
    callback: function (result) {
        alert(result);
    }
});</code></pre>

<hr/>

<button type="button" onclick="runCode('loading_basic')">loading</button>
<pre id="loading_basic" class="language-javascript line-numbers"><code>var dialog = bootbox.dialog({
    message: '<i class="fa fa-spin fa-spinner"></i>loading...',centerVertical: true,
    closeButton: false
});
//3秒钟后自动关闭
window.setTimeout(function(){
    dialog.modal('hide');
},3000);</code></pre>

<button type="button" onclick="runCode('loading_change_basic')">loading change</button>
<pre id="loading_change_basic" class="language-javascript line-numbers"><code>var dialog = bootbox.dialog({
    message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
});
dialog.init(function(){
    setTimeout(function(){
        dialog.find('.bootbox-body').html('success...');
    }, 2000);
});
//3秒钟后自动关闭
window.setTimeout(function(){
    dialog.modal('hide');
},3000);
</code></pre>

<script src="../jquery/jquery.min.js"></script>
<script src="../bootstrap.min.js"></script>
<script src="prism/prism.js"></script>
<script src="bootbox/bootbox.all.min.js"></script>
<script type="text/javascript">
//运行js函数
function runCode(codeId){
    var code = document.getElementById(codeId).innerText;
    eval(code);
}
//设置窗口居中
function setDialogCenter(checkbox){
    var checked = checkbox.checked;
    if(checked) {
        $("<style id='bootbox_center_style'/>").text($("#dialog_center_css").text()).appendTo($("head"));
    } else {
        $("#bootbox_center_style").remove();
    }
}
//增加css设置窗口居中
</script>
</body>
</html>